<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>Matrix Test | TM Lib</title>
        
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            body {
                font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
            }
            
            #content {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
                width: 100%;
            }
            
            #content>* {
                padding: 10px 20px;
                width: 50%;
            }
        </style>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        
        <script id="test-script">
            TM.using();
            TM.loadScript("geom", "matrix");
            
            TM.main(function(){
                // コンソール
                var c = DebugConsole("#console");
                //var c = console; // コンソールの方に出力
                
                // Matrix33 test
                c.group("【Matrix33 Test】");
                
                
                var mat = TM.$M33(0, 1, 2, 3, 4, 5, 6, 7, 8);
                
                c.log("init/set: ");
                c.log(mat.toString()).log();
                
                c.groupEnd();
                
                
                c.group("【Matrix Test】");
                
                var $M44 = TM.$M44;
                var mat = TM.$M44(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15);
                
                c.log("init/set: ");
                c.log(mat.toString()); c.log();
                
                c.log("identity: ");
                c.log(mat.identity()); c.log();
                
                c.log("zero: ");
                c.log(mat.zero()); c.log();
                
                c.log("translate: ");
                c.log($M44().translate(5, 10, 15)); c.log();
                
                c.log("rotateX: ");
                c.log($M44().rotateX(Math.PI/2)); c.log();
                
                c.log("rotateY: ");
                c.log($M44().rotateY(Math.PI/2)); c.log();
                
                c.log("rotateZ: ");
                c.log($M44().rotateZ(Math.PI/2)); c.log();
                
                c.log("scale: ");
                c.log($M44().scale(5, 10, 15)); c.log();
                
                c.groupEnd();
            });
        </script>
        
        <script>
            TM.addNamespace("prettify", "./../../plugins/prettify");
            TM.loadPrettify();
            
            TM.main(function(){
                TM.$id("code").innerText = TM.$id("test-script").innerText;
                prettyPrint();
            });
        </script>
        
    </head>
    
    <body>
        
        <h1>Matrix Test | TM Lib</h1>
        <div id="content">
            <section>
                <h2>Console</h2>
                <pre id="console" class="prettyprint"></pre>
            </section>
            <section>
                <h2>Code</h2>
                <pre id="code" class="prettyprint"></pre>
            </section>
        </div>
        
    </body>
</html>